<template>
	<view class="cart-container">

		<view class="cate-list" v-if="cateObj.category.bannerUrlList">
			<!-- 轮播图 -->
			<swiper class="banners" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				:circular="true" indicator-active-color="#eee">
				<swiper-item v-for="item in cateObj.category.bannerUrlList">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>

			<view class="title" v-if="cateList.length>0">
				{{cateObj.category.name}}
			</view>
			<view class="desc" v-if="cateList.length>0">
				{{cateObj.category.frontDesc}}
			</view>
			<!-- 商品信息 -->
			<view class="shop-list">
				<view class="shop-item" v-for="item in cateObj.itemList" :key="item.id" @click="goToDetails(item)">
					<image :src="item.listPicUrl" mode=""></image>
					<view class="shop-info">
						{{item.name}}
					</view>
					<view class="price">
						{{item.retailPrice}}
					</view>
				</view>
			</view>

		</view>
		<view class="loading" v-else>
			<image src="../../static/images/loading.gif" mode=""></image>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		props: {
			navId: Number,
		},
		data() {
			return {
				cateList: [],
			}
		},
		mounted() {
			this.getCataListData();
		},
		methods: {
			// 获取商品数据列表
			async getCataListData() {
				this.cateList = await request('/getCateListData');

			},
			// 跳转商品详情页面
			goToDetails(shopItem) {
				uni.navigateTo({
					url: '/pages/details/details?shopItem=' + JSON.stringify(shopItem)
				})
			}
		},
		computed: {
			// 返回对应id的商品列表
			cateObj() {
				return this.cateList.find(item => item.category.parentId === this.navId);
			}
		}
	}
</script>

<style lang="scss">
	.cate-list {
		.banners {
			width: 100%;
			height: 350rpx;

			.swiper-item {
				image {
					width: 100%;
					height: 350rpx;
				}
			}
		}

		.title {
			margin: 30rpx 0 10rpx 0;
			text-align: center;
			font-size: 32rpx;
		}

		.desc {
			text-align: center;
			font-size: 24rpx;
			color: #a7a2a2;
		}

		.shop-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			padding: 0 1%;

			&::after {
				content: '';
				width: 48%;
			}

			.shop-item {
				margin: 20rpx 0rpx;
				width: 47%;

				image {
					width: 100%;
					height: 344rpx;
					border-radius: 20rpx;

				}

				.shop-info {
					margin: 10rpx 0 15rpx 0;
					font-size: 30rpx;
				}

				.price {
					font-size: 40rpx;
					color: #fa1e32;

					&::before {
						content: '¥';
						display: inline-block;
						font-size: 26rpx;

					}
				}
			}

		}
	}
</style>
